<template>
  <div class="star-wrapper">
    <span
      v-for="star in length"
      :key="star"
      @click="handleClick(star)"
      class="star"
      :class="{ active: star <= value }"
    ></span>
  </div>
</template>

<script>
export default {
  name: "star",
  props: {
    length: {
      type: Number,
      default: 5
    },
    value: {
      type: Number,
      default: 5
    }
  },
  methods: {
    handleClick(star) {
      let value = this.value;
      if (star != value) {
        value = Number(star);
      } else {
        value -= 1;
      }
      this.$emit("input", value);
    }
  }
};
</script>

<style lang="scss" scoped>
.star-wrapper {
  display: flex;
  align-items: center;
  .star {
    $w_h: 0.2rem;
    width: $w_h;
    height: $w_h;
    margin-left: 0.06rem;
    background-size: 100% 100%;
    background-image: url("~@/assets/images/common/star.png");
    &.active {
      background-image: url("~@/assets/images/common/cc-star.png");
    }
  }
}
</style>
